<template>
  <div class="org-month">
    <div class="org-month-title" v-if="showType == '1'">
      <div class="content_title2">
        <div class="content_title2_r">
          <div class="content_title2_top1">{{ statics.shouldAttendDays || '*' }}</div>
          <div class="content_title2_top2">应出勤(天)</div>
        </div>
        <div class="content_title2_r">
          <div class="content_title2_top1">{{ statics.attendDays || '*' }}</div>
          <div class="content_title2_top2">实际出勤(天)</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('1')" :class="{ title_select: param2.type == '1' }">
          <div class="content_title2_top3">{{ statics.lateCount || 0 }}</div>
          <div class="content_title2_top2">迟到次数</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('2')" :class="{ title_select: param2.type == '2' }">
          <div class="content_title2_top3">{{ statics.leaveEarlyCount || 0 }}</div>
          <div class="content_title2_top2">早退次数</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('4')" :class="{ title_select: param2.type == '4' }">
          <div class="content_title2_top3">{{ statics.neglectWorkCount || 0 }}</div>
          <div class="content_title2_top2">旷工（次）</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('8')" :class="{ title_select: param2.type == '8' }">
          <div class="content_title2_top3">{{ statics.leaveDays || 0 }}</div>
          <div class="content_title2_top2">请假（天）</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('9')" :class="{ title_select: param2.type == '9' }">
          <div class="content_title2_top3">{{ statics.outWorkDays || 0 }}</div>
          <div class="content_title2_top2">外出（天）</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('5')" :class="{ title_select: param2.type == '5' }">
          <div class="content_title2_top3">{{ statics.overWorkHours || 0 }}</div>
          <div class="content_title2_top2">加班（小时）</div>
        </div>
        <div class="content_title2_r" @click="leavePersonCli('7')" :class="{ title_select: param2.type == '7' }">
          <div class="content_title2_top3">{{ statics.leaveOffDays || 0 }}</div>
          <div class="content_title2_top2">调休（天）</div>
        </div>
      </div>
    </div>
    <div class="org-month-title" v-if="showType == '2'">
      <div class="content_title2">
        <div class="content_title2_r" @click="leaveOrgCli('1')" :class="{ title_select: param2.type == '1' }">
          <div class="content_title2_top3">{{ statics.lateCount || 0 }}</div>
          <div class="content_title2_top2">迟到（人）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('2')" :class="{ title_select: param2.type == '2' }">
          <div class="content_title2_top3">{{ statics.leaveEarlyCount || 0 }}</div>
          <div class="content_title2_top2">早退（人）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('4')" :class="{ title_select: param2.type == '4' }">
          <div class="content_title2_top3">{{ statics.neglectWorkCount || 0 }}</div>
          <div class="content_title2_top2">旷工（人）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('8')" :class="{ title_select: param2.type == '8' }">
          <div class="content_title2_top3">{{ statics.leaveCount || 0 }}/{{ statics.leaveTimes || 0 }}</div>
          <div class="content_title2_top2">请假（人/人次）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('9')" :class="{ title_select: param2.type == '9' }">
          <div class="content_title2_top3">{{ statics.outWorkCount || 0 }}/{{ statics.outWorkTimes || 0 }}</div>
          <div class="content_title2_top2">外出（人/人次）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('5')" :class="{ title_select: param2.type == '5' }">
          <div class="content_title2_top3">{{ statics.overTimeCount || 0 }}</div>
          <div class="content_title2_top2">加班（人）</div>
        </div>
        <div class="content_title2_r" @click="leaveOrgCli('7')" :class="{ title_select: param2.type == '7' }">
          <div class="content_title2_top3">{{ statics.leaveOffCount || 0 }}/{{ statics.leaveOffTimes || 0 }}</div>
          <div class="content_title2_top2">调休（人/人次）</div>
        </div>
      </div>
    </div>

    <div class="table_one">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        row-id="id"
        size="medium"
        resizable
        :loading="loading2"
        :data="tableOne"
        :header-cell-class-name="table_col"
        highlight-hover-row
        max-height="100%"
        :row-config="{ isCurrent: true, isHover: true }"
        :filter-config="{ remote: true }"
        @cell-click="tableRowChange"
        @filter-change="filterChange"
        ref="vxeTable"
        v-if="tableOne.length > 0">
        <vxe-column
          field="leaveTypeName"
          :title="param2.type == '8' ? '请假类型' : '公务外出类型'"
          align="center"
          key="leaveTypeName"
          :filters="filterList"
          v-if="['8', '9'].includes(param2.type)"></vxe-column>
        <vxe-column field="orgName" title="部门" align="center" v-if="showType == '2'"></vxe-column>
        <vxe-column field="userName" title="姓名" align="center" v-if="showType == '2'"></vxe-column>
        <vxe-column field="postName" title="职务" align="center" v-if="showType == '2'"></vxe-column>
        <vxe-column
          field="punchTime"
          :title="param2.type == '1' ? '上班打卡时间' : '下班打卡时间'"
          align="center"
          key="punchTime"
          v-if="['1', '2'].includes(param2.type)"></vxe-column>
        <vxe-column field="attendanceDate" title="日期" align="center" v-if="param2.type == '4'"></vxe-column>
        <vxe-column
          field="checkTypeName"
          title="考勤结果"
          align="center"
          key="checkTypeName"
          v-if="['1', '2', '4'].includes(param2.type)">
          <template #default="{ row }">
            <div v-if="row.hours === '未打卡'">{{ row.hours }}</div>
            <div v-else>{{ row.checkTypeName }}{{ row.hours }}</div>
          </template>
        </vxe-column>
        <vxe-column
          field="attendanceStandard"
          title="考勤班次"
          align="center"
          v-if="['1', '2'].includes(param2.type)"></vxe-column>
        <vxe-column title="打卡时间" align="center" v-if="param2.type == '4'">
          <template #default="{ row }">
            <div v-if="row.startTime || row.endTime">
              {{ row.startTime }}-
              <span v-if="row.endTime">{{ moment(row.endTime).format('HH:mm') }}</span>
            </div>
            <div v-else>—</div>
          </template>
        </vxe-column>
        <vxe-column
          field="startTime"
          :title="
            param2.type == '8'
              ? '请假开始时间'
              : param2.type == '9'
              ? '外出开始时间'
              : param2.type == '7'
              ? '调休开始时间'
              : '加班开始时间'
          "
          align="center"
          key="startTime"
          v-if="['5', '7', '8', '9'].includes(param2.type)"></vxe-column>
        <vxe-column
          field="endTime"
          :title="
            param2.type == '8'
              ? '请假结束时间'
              : param2.type == '9'
              ? '外出结束时间'
              : param2.type == '7'
              ? '调休结束时间'
              : '加班结束时间'
          "
          align="center"
          key="endTime"
          v-if="['5', '7', '8', '9'].includes(param2.type)"></vxe-column>
        <vxe-column
          field="days"
          :title="
            param2.type == '8'
              ? '请假天数(天)'
              : param2.type == '9'
              ? '外出天数(天)'
              : param2.type == '7'
              ? '调休天数(天)'
              : ''
          "
          align="center"
          key="days"
          v-if="['7', '8', '9'].includes(param2.type)">
          <template #default="{ row }">
            <div class="detail_box">
              <span>{{ row.days }}</span>
              <span class="word_tip" v-if="row.leaveType == '25'">
                <el-popover placement="bottom" width="300" trigger="hover">
                  工作日为{{ row.days }}天，每天一小时
                  <i class="el-icon-info" slot="reference"></i>
                </el-popover>
              </span>
            </div>
          </template>
        </vxe-column>
        <vxe-column
          field="hours"
          :title="
            param2.type == '8'
              ? '请假时长(h)'
              : param2.type == '9'
              ? '外出时长(h)'
              : param2.type == '7'
              ? '调休时长(h)'
              : '加班时长'
          "
          align="center"
          key="hours"
          v-if="['5', '7', '8', '9'].includes(param2.type)"></vxe-column>
      </vxe-table>
      <div class="no_data" v-else>
        <empty></empty>
      </div>
      <el-pagination
        class="page-r"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-size="tablePage.pageSize"
        :current-page="tablePage.currentPage"
        layout="prev, pager, next,total"
        :total="tablePage.total"
        hide-on-single-page></el-pagination>
    </div>
    <XnDialog
      title="考勤登记单"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="76%"
      class="branch_dialog"
      @close="inforDiaShow = false">
      <AttendOneRight
        staticsShow="1"
        :id="activeInfo.id"
        :formId="activeInfo.formId"
        :keysItem="activeInfo"
        ref="inforDetail"
        :pageFrom="showType === '2' ? 'dialog' : ''" />
    </XnDialog>
  </div>
</template>

<script>
import {
  getListLeaveType,
  getAttendanceSumSelf,
  getAttendanceSumOrg,
  getAttendanceStatusSelf,
  getAttendanceStatusOrg,
} from '@apis/api-attendance.js'
import AttendOneRight from '../components/AttendOneRight.vue'
import XnDialog from '@com/xnDialog.vue'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  components: { AttendOneRight, XnDialog },
  props: {
    showType: {
      type: String,
      default: '1',
    },
    showAll: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      param1: {},
      param2: {
        userId: '',
        orgId: '',
        type: '1',
      },
      statics: {},
      tableOne: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      moment: moment,
      loading2: false,
      inforDiaShow: false,
      activeInfo: {
        id: '',
        formId: '',
        processInstanceId: '',
      },
      filterList: [],
      filterStr: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 获取个人月度汇总
    getPersonalLeaveStatistics(startTime, endTime, orgId, userId) {
      this.param1 = {
        startTime: startTime,
        endTime: endTime,
      }
      this.param2 = {
        orgId: orgId,
        userId: userId,
      }
      this.tablePage.currentPage = 1
      this.filterStr = ''
      getAttendanceSumSelf({
        ...this.param1,
      }).then(res => {
        this.statics = res.data
        if (this.statics.lateCount > 0) {
          this.param2.type = '1'
        } else if (this.statics.lateCount === 0 && this.statics.leaveEarlyCount > 0) {
          this.param2.type = '2'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount > 0
        ) {
          this.param2.type = '4'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveDays > 0
        ) {
          this.param2.type = '8'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveDays === 0 &&
          this.statics.outWorkDays > 0
        ) {
          this.param2.type = '9'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveDays === 0 &&
          this.statics.outWorkDays === 0 &&
          this.statics.overWorkHours > 0
        ) {
          this.param2.type = '5'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveDays === 0 &&
          this.statics.outWorkDays === 0 &&
          this.statics.overWorkHours === 0 &&
          this.statics.leaveOffDays > 0
        ) {
          this.param2.type = '7'
        }
        this.getPersonTable()
        if (this.param2.type === '8' || this.param2.type === '9') {
          this.getListLeaveType()
        }
      })
    },
    // 获取部门月度考勤汇总
    getOrgLeaveStatistics(startTime, endTime, orgId, userId) {
      this.param1 = {
        startTime: startTime,
        endTime: endTime,
      }
      this.param2 = {
        orgId: orgId,
        userId: userId,
      }
      const obj = Object.assign(this.param1, this.param2)
      this.tablePage.currentPage = 1
      this.filterStr = ''
      getAttendanceSumOrg({
        ...obj,
      }).then(res => {
        this.statics = res.data
        this.param2.type = '1'
        if (this.statics.lateCount > 0) {
          this.param2.type = '1'
        } else if (this.statics.lateCount === 0 && this.statics.leaveEarlyCount > 0) {
          this.param2.type = '2'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount > 0
        ) {
          this.param2.type = '4'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveCount > 0
        ) {
          this.param2.type = '8'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveCount === 0 &&
          this.statics.outWorkCount > 0
        ) {
          this.param2.type = '9'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveCount === 0 &&
          this.statics.outWorkCount === 0 &&
          this.statics.overTimeCount > 0
        ) {
          this.param2.type = '5'
        } else if (
          this.statics.lateCount === 0 &&
          this.statics.leaveEarlyCount === 0 &&
          this.statics.neglectWorkCount === 0 &&
          this.statics.leaveCount === 0 &&
          this.statics.outWorkCount === 0 &&
          this.statics.overTimeCount === 0 &&
          this.statics.leaveOffCount > 0
        ) {
          this.param2.type = '7'
        }
        this.tableOne = []
        this.getOrgTable()
        if (this.param2.type === '8' || this.param2.type === '9') {
          this.getListLeaveType()
        }
      })
    },
    // 获取个人列表
    getPersonTable(leaveId) {
      const obj = Object.assign(this.param1, this.param2)
      getAttendanceStatusSelf({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          ...obj,
          leaveId: this.filterStr || '',
        },
      }).then(res => {
        if (res.status === 200) {
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },
    // 获取部门列表
    getOrgTable(leaveId) {
      this.loading = true
      const obj = Object.assign(this.param1, this.param2)
      getAttendanceStatusOrg({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          ...obj,
          leaveId: this.filterStr || '',
        },
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },

    handleCurrentChange(e) {
      this.tablePage.currentPage = e
      if (this.showType === '1') {
        this.getPersonTable()
      } else if (this.showType === '2') {
        this.getOrgTable()
      }
    },
    handleSizeChange(e) {
      this.tablePage.pageSize = e
      if (this.showType === '1') {
        this.getPersonTable()
      } else if (this.showType === '2') {
        this.getOrgTable()
      }
    },

    leavePersonCli(type) {
      this.param2.type = type
      this.tablePage.currentPage = 1
      this.tableOne = []
      this.tablePage.total = 0
      this.filterStr = ''
      this.getPersonTable()
      if (type === '8' || type === '9') {
        this.getListLeaveType()
      }
    },

    leaveOrgCli(type) {
      this.param2.type = type
      this.tablePage.currentPage = 1
      this.tableOne = []
      this.tablePage.total = 0
      this.filterStr = ''
      this.getOrgTable()
      if (type === '8' || type === '9') {
        this.getListLeaveType()
      }
    },
    tableRowChange({ row }) {
      if (['7', '8', '9'].includes(this.param2.type)) {
        this.activeInfo = {
          id: row.dailyId,
          formId: row.formId,
          processInstanceId: row.processInstanceId,
        }
        this.inforDiaShow = true
      }
    },
    filterChange({ values }) {
      this.filterStr = values.join(',')
      this.tablePage.currentPage = 1
      this.tableOne = []
      this.tablePage.total = 0
      if (this.showType === '1') {
        this.getPersonTable()
      } else if (this.showType === '2') {
        this.getOrgTable()
      }
    },
    /* 头部样式 */
    table_col({ row, column, rowIndex, columnIndex }) {
      return 'table_col'
    },
    getListLeaveType() {
      this.loading = true
      const param = Object.assign(this.param1, this.param2)
      getListLeaveType(param).then(res => {
        if (res.status === 200) {
          this.loading = false
          const arr = []
          res.data.forEach(li => {
            arr.push({
              label: li.typeName,
              value: li.leaveType,
            })
          })
          this.filterList = arr
          const $table = this.$refs.vxeTable
          const column = $table.getColumnByField('leaveTypeName')
          $table.setFilter(column, this.filterList)
          $table.updateData()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.org-month {
  height: 100%;
  .org-month-title {
    height: 100px;
    padding: 10px;
  }
  .content_title2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ececec;
    padding: 10px;
    .title_select {
      padding: 4px 6px;
      background-color: #409eff;
      color: #fff;
      .content_title2_top3,
      .content_title2_top2 {
        color: #fff !important;
      }
    }
    .content_title2_r {
      text-align: center;
      cursor: pointer;
      color: #409eff;
      .content_title2_top1 {
        font-weight: bold;
        font-size: 16px;
        line-height: 30px;
        color: #333;
      }
      .content_title2_top3 {
        font-weight: bold;
        font-size: 16px;
        line-height: 30px;
      }
      .content_title2_top2 {
        color: #c0c4cc;
      }
    }
  }
  .table_one {
    padding: 0 10px;
    height: calc(100% - 150px);
    display: flex;
    flex-direction: column;
    .el-table {
      border-left: 1px solid #ececec;
      width: 99.9%;
    }
    .el-pagination {
      text-align: right;
    }
    .page-r {
      text-align: right;
    }
    .mytable-scrollbar {
      flex: 1;
      /deep/.vxe-table--render-wrapper {
        height: 100%;
        .vxe-table--main-wrapper {
          height: 100%;
          display: flex;
          flex-direction: column;
          .vxe-table--body-wrapper {
            flex: 1;
          }
        }
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 5px;
          bottom: 0;
          color: #999;
        }
      }
    }
  }
}
</style>
